function lightenColor(hex, percent) {
  // 将颜色转换成RGB表示
  function hexToRgb(hex) {
    // 去除 #
    hex = hex.replace('#', '')
    // 将3位十六进制颜色转换成6位
    if (hex.length === 3) {
      hex = hex
        .split('')
        .map(function (hex) {
          return hex + hex
        })
        .join('')
    }
    // 分离RGB
    const bigint = parseInt(hex, 16)
    const r = (bigint >> 16) & 255
    const g = (bigint >> 8) & 255
    const b = bigint & 255
    return [r, g, b]
  }

  // 将RGB表示转换成十六进制颜色
  function rgbToHex(rgb) {
    return (
      '#' +
      ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2])
        .toString(16)
        .slice(1)
    )
  }

  // 计算调整后的颜色
  function adjustColor(rgb, percent) {
    let r = rgb[0] + Math.round(((255 - rgb[0]) * percent) / 100)
    const g = rgb[1]
    const b = rgb[2]

    // 保持最低值为原来的颜色
    r = Math.min(255, r)

    return [r, g, b]
  }

  const rgb = hexToRgb(hex)
  const adjustedRgb = adjustColor(rgb, percent)
  const adjustedHex = rgbToHex(adjustedRgb)
  return adjustedHex
}

// 自定义指令函数
export default function createBorderDirective() {
  return {
    beforeMount(el, binding) {
      //默认只有type=primary  才需要修改
      if (el.classList.contains('el-button--primary')) {
        el.style.setProperty('--el-color-primary', binding.value)
        el.style.setProperty(
          '--el-button-hover-bg-color',
          lightenColor(binding.value, 99)
        )
        el.style.setProperty(
          '--el-button-hover-border-color',
          lightenColor(binding.value, 99)
        )
      } else if (el.classList.length === 1) {
        //type 不传值
        el.style.setProperty('--el-button-border-color', binding.value)
        el.style.setProperty('--el-button-text-color', binding.value)
        el.style.setProperty(' --el-button-hover-text-color', '')
      }
    },
    updated(el, binding) {
      console.log('数据已更新：', binding.value)
    }
  }
}


